<i18n locale="zh-CN" lang="yaml">
Experimental Features that have not been officially released can be enabled here, configuration is only saved locally in the browser.: 一些尚未正式公开的实验性功能可在本页面开启，本页面配置仅保存在浏览器本地

Show PIP Tool: 显示 PIP 工具
For installing 3rd-party Python package: 用于安装第三方 Python 包

Show File Service: 显示文件服务
For serving resource directories as file services: 用于将资源目录提供为文件服务

Show File Manager: 显示文件管理
For managing files on the server side: 用于管理服务器端文件

Show Func Cache Manager: 显示函数缓存管理
For managing cached data from Scripts: 用于管理脚本产生的缓存数据

Show Func Store Manager: 显示函数存储管理
For managing stored data from Scripts: 用于管理脚本产生的存储数据

Show Func Doc: 显示函数文档
Document page for all Python functions with DFF.API decorator: 函数文档，包含所有添加 DFF.API 装饰器的 Python 函数

Show Open API Doc: 显示 Open API 文档
Document page for Open API powered by Swagger: 基于 Swagger 的 Open API 文档

Show Script Publish History: 显示脚本发布历史
For displaying the history of published Scripts: 用于展示脚本的历史发布版本

Show Access Key Manage: 显示 Access Key 管理
For allowing external systems to call the Open APIs of this system: 用于管理允许外部系统调用本系统的 Open API
</i18n>

<!-- Generated by OpenCC START -->
<i18n locale="zh-HK" lang="yaml">
Document page for Open API powered by Swagger: 基於 Swagger 的 Open API 文檔
Document page for all Python functions with DFF.API decorator: 函數文檔，包含所有添加 DFF.API 裝飾器的 Python 函數
? Experimental Features that have not been officially released can be enabled here, configuration is only saved locally in the browser.
: 一些尚未正式公開的實驗性功能可在本頁面開啓，本頁面配置僅保存在瀏覽器本地
For allowing external systems to call the Open APIs of this system: 用於管理允許外部系統調用本系統的 Open API
For displaying the history of published Scripts: 用於展示腳本的歷史發佈版本
For installing 3rd-party Python package: 用於安裝第三方 Python 包
For managing cached data from Scripts: 用於管理腳本產生的緩存數據
For managing files on the server side: 用於管理服務器端文件
For managing stored data from Scripts: 用於管理腳本產生的存儲數據
For serving resource directories as file services: 用於將資源目錄提供為文件服務
Show Access Key Manage: 顯示 Access Key 管理
Show File Manager: 顯示文件管理
Show File Service: 顯示文件服務
Show Func Cache Manager: 顯示函數緩存管理
Show Func Doc: 顯示函數文檔
Show Func Store Manager: 顯示函數存儲管理
Show Open API Doc: 顯示 Open API 文檔
Show PIP Tool: 顯示 PIP 工具
Show Script Publish History: 顯示腳本發佈歷史
</i18n>
<i18n locale="zh-TW" lang="yaml">
Document page for Open API powered by Swagger: 基於 Swagger 的 Open API 文件
Document page for all Python functions with DFF.API decorator: 函式文件，包含所有新增 DFF.API 裝飾器的 Python 函式
? Experimental Features that have not been officially released can be enabled here, configuration is only saved locally in the browser.
: 一些尚未正式公開的實驗性功能可在本頁面開啟，本頁面配置僅儲存在瀏覽器本地
For allowing external systems to call the Open APIs of this system: 用於管理允許外部系統呼叫本系統的 Open API
For displaying the history of published Scripts: 用於展示指令碼的歷史釋出版本
For installing 3rd-party Python package: 用於安裝第三方 Python 包
For managing cached data from Scripts: 用於管理指令碼產生的快取資料
For managing files on the server side: 用於管理伺服器端檔案
For managing stored data from Scripts: 用於管理指令碼產生的儲存資料
For serving resource directories as file services: 用於將資源目錄提供為檔案服務
Show Access Key Manage: 顯示 Access Key 管理
Show File Manager: 顯示檔案管理
Show File Service: 顯示檔案服務
Show Func Cache Manager: 顯示函式快取管理
Show Func Doc: 顯示函式文件
Show Func Store Manager: 顯示函式儲存管理
Show Open API Doc: 顯示 Open API 文件
Show PIP Tool: 顯示 PIP 工具
Show Script Publish History: 顯示指令碼釋出歷史
</i18n>
<!-- Generated by OpenCC END -->

<template>
  <transition name="fade">
    <el-container direction="vertical" v-show="$store.state.isLoaded">
      <!-- Header area -->
      <el-header height="60px">
        <h1>
          {{ $t('Experimental Features') }}
        </h1>
      </el-header>

      <!-- Setup area -->
      <el-main>
        <el-row :gutter="20">
          <el-col :span="15">
            <div class="setup-form">
              <el-form ref="form" :model="form" label-width="0px">
                <el-form-item>
                  <InfoBlock type="info" :title="$t('Experimental Features that have not been officially released can be enabled here, configuration is only saved locally in the browser.')" />
                </el-form-item>

                <el-form-item prop="PIPTool">
                  <el-switch :active-text="$t('Show PIP Tool')" v-model="form.PIPTool"></el-switch>
                  <div class="text-small form-item-tip">
                    {{ $t('For installing 3rd-party Python package') }}
                  </div>
                </el-form-item>

                <el-form-item prop="FileService">
                  <el-switch :active-text="$t('Show File Service')" v-model="form.FileService"></el-switch>
                  <div class="text-small form-item-tip">
                    {{ $t('For serving resource directories as file services') }}
                  </div>
                </el-form-item>

                <el-form-item prop="FileManager">
                  <el-switch :active-text="$t('Show File Manager')" v-model="form.FileManager"></el-switch>
                  <div class="text-small form-item-tip">
                    {{ $t('For managing files on the server side') }}
                  </div>
                </el-form-item>

                <el-form-item prop="FuncCacheManager">
                  <el-switch :active-text="$t('Show Func Cache Manager')" v-model="form.FuncCacheManager"></el-switch>
                  <div class="text-small form-item-tip">
                    {{ $t('For managing cached data from Scripts') }}
                  </div>
                </el-form-item>
                <el-form-item prop="FuncStoreManager">
                  <el-switch :active-text="$t('Show Func Store Manager')" v-model="form.FuncStoreManager"></el-switch>
                  <div class="text-small form-item-tip">
                    {{ $t('For managing stored data from Scripts') }}
                  </div>
                </el-form-item>

                <el-form-item prop="FuncDoc">
                  <el-switch :active-text="$t('Show Func Doc')" v-model="form.FuncDoc"></el-switch>
                  <div class="text-small form-item-tip">
                    {{ $t('Document page for all Python functions with DFF.API decorator') }}
                  </div>
                </el-form-item>

                <el-form-item prop="OpenAPIDoc">
                  <el-switch :active-text="$t('Show Open API Doc')" v-model="form.OpenAPIDoc"></el-switch>
                  <div class="text-small form-item-tip">
                    {{ $t('Document page for Open API powered by Swagger') }}
                  </div>
                </el-form-item>

                <el-form-item prop="ScriptPublishHistory">
                  <el-switch :active-text="$t('Show Script Publish History')" v-model="form.ScriptPublishHistory"></el-switch>
                  <div class="text-small form-item-tip">
                    {{ $t('For displaying the history of published Scripts') }}
                  </div>
                </el-form-item>

                <el-form-item prop="AccessKeys" v-if="$store.getters.isAdmin">
                  <el-switch :active-text="$t('Show Access Key Manage')" v-model="form.AccessKeys"></el-switch>
                  <div class="text-small form-item-tip">
                    {{ $t('For allowing external systems to call the Open APIs of this system') }}
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="9" class="hidden-md-and-down">
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </transition>
</template>

<script>
export default {
  name: 'ExperimentalFeatures',
  components: {
  },
  watch: {
    $route: {
      immediate: true,
      async handler(to, from) {
        await this.loadData();
      }
    },
    form: {
      deep: true,
      handler(to, from) {
        let _formData = this.T.jsonCopy(this.form);
        this.$store.commit('updateExperimentalFeatureShowMap', _formData);
      }
    },
  },
  methods: {
    async loadData() {
      let _featureMap = this.T.jsonCopy(this.$store.state.experimentalFeatureShowMap) || {};

      let nextForm = {};
      Object.keys(this.form).forEach(f => nextForm[f] = !!_featureMap[f]);
      this.form = nextForm;

      this.$store.commit('updateLoadStatus', true);
    },
  },
  computed: {
  },
  props: {
  },
  data() {
    return {
      form: {
        PIPTool             : false,
        FileService         : false,
        FileManager         : false,
        FuncCacheManager    : false,
        FuncStoreManager    : false,
        FuncDoc             : false,
        OpenAPIDoc          : false,
        ScriptPublishHistory: false,
        AccessKeys          : false,
      },
    }
  },
}
</script>

<style scoped>
</style>
